<script setup lang="ts">
import { getSingerList } from '@/api/singer'
import Scroll from '@/components/scroll/index.vue'
import useIndex from '@/views/singer/use-index'
import useCurrentSectionTitle from '@/views/singer/use-current-section-title'
import useInitScrollHeight from '@/common/use-init-scroll-height'
import usePaddingBottom from '@/common/use-padding-bottom'
const { paddingBottomStyle } = usePaddingBottom()
const router = useRouter()
const {
  groupRef,
  singerList,
  currentTitle,
  currentIndex,
  currentTitleStyle,
  indexList,
  scrollHandle
} = useCurrentSectionTitle()
const { scrollRef, indexRef, touchstartHandle, touchmoveHandle } = useIndex(groupRef)
const name = ref<string>('')
const pic = ref<string>('')
const getSingerListParams: IGetSingerListParams = reactive({
  offset: 1,
  type: -1,
  area: -1,
  limit: 100,
  initial: -1
})
onMounted(async () => {
  singerList.value = (await getSingerList()).data
})
const { scrollHeight } = useInitScrollHeight(['van-tabbar', 'singer filter-wrapper', 'van-search'])

// 获取歌手分类数据
async function fetchSingerList() {
  singerList.value = (await getSingerList(getSingerListParams)).data
}
watch(singerList, async () => {
  await nextTick()
  scrollRef.value?.scroll?.refresh()
})
const filter = {
  types: [
    { label: '全部', value: -1 },
    { label: '男歌手', value: 1 },
    { label: '女歌手', value: 2 },
    { label: '乐队', value: 3 }
  ],
  areas: [
    {
      label: '全部',
      value: -1
    },
    {
      label: '华语',
      value: 7
    },
    {
      label: '欧美',
      value: 96
    },
    {
      label: '日本',
      value: 8
    },
    {
      label: '韩国',
      value: 16
    },
    {
      label: '其他',
      value: 0
    }
  ]
}
const currentType = ref<number>(-1)
const currentArea = ref<number>(-1)
// 歌手类型点击事件
function typeClick(value: number) {
  currentType.value = value
  getSingerListParams.offset = 1
  getSingerListParams.type = value
  fetchSingerList()
}
// 歌手区域点击事件
function areaClick(value: number) {
  currentArea.value = value
  getSingerListParams.offset = 1
  getSingerListParams.area = value
  fetchSingerList()
}
function selectSinger(singer: ISingerItem) {
  name.value = singer.name
  pic.value = singer.picUrl
  router.push({
    path: `/singer/${singer.id}`
  })
}
</script>

<template>
  <div class="singer">
    <ul
      ref="indexRef"
      class="index-list-section"
      @touchstart.stop.prevent="touchstartHandle"
      @touchmove.stop.prevent="touchmoveHandle"
    >
      <li
        v-for="(item, index) of indexList"
        :key="index"
        class="index-item"
        :class="currentIndex === index ? 'current' : ''"
        :data-index="index"
      >
        {{ item }}
      </li>
    </ul>
    <div class="filter-wrapper" @click.stop>
      <ul class="type">
        <li
          v-for="item in filter.types"
          :key="item.value"
          :class="item.value === currentType ? 'current-type' : ''"
          class="item"
          @click="typeClick(item.value)"
        >
          {{ item.label }}
        </li>
      </ul>
      <ul class="area">
        <li
          v-for="item in filter.areas"
          :key="item.value"
          :class="item.value === currentArea ? 'current-area' : ''"
          class="item"
          @click="areaClick(item.value)"
        >
          {{ item.label }}
        </li>
      </ul>
    </div>
    <scroll
      ref="scrollRef"
      :bounce="false"
      :height="scrollHeight"
      class="scroll"
      @scroll="scrollHandle"
    >
      <ul ref="groupRef" :style="paddingBottomStyle">
        <li v-for="item of singerList" :key="item.title" class="group">
          <h2 class="title">{{ item.title }}</h2>
          <ul>
            <li
              v-for="singerItem of item.list"
              :key="singerItem.id"
              class="singer-item"
              @click.stop="selectSinger(singerItem)"
            >
              <img class="singer-pic" v-lazy="singerItem.picUrl" alt="" />
              <span class="singer-name">{{ singerItem.name }}</span>
            </li>
          </ul>
        </li>
      </ul>
      <p v-show="currentTitle.length" class="current-title" :style="currentTitleStyle">
        {{ currentTitle }}
      </p>
    </scroll>
    <router-view v-slot="{ Component }">
      <transition name="slide">
        <component :is="Component" :title="name" :pic="pic" />
      </transition>
    </router-view>
  </div>
</template>

<style scoped lang="scss">
.singer {
  overflow: hidden;
  .filter-wrapper {
    box-sizing: border-box;
    padding: 10px 10px 0;
    height: 55px;
    ul {
      display: flex;
      .item {
        width: 60px;
        margin-bottom: 10px;
        color: $color-text-l;
        font-size: $font-size-small;
        &.current-type {
          color: $color-theme;
        }
        &.current-area {
          color: $color-theme;
        }
      }
    }
  }
  .scroll {
    position: relative;
    height: 100%;
    overflow: hidden;
    .current-title {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 30px;
      line-height: 30px;
      padding-left: 20px;
      font-size: 12px;
      color: $color-text-l;
      background: $color-highlight-background;
    }
  }

  .group {
    padding-bottom: 20px;
    .title {
      height: 30px;
      line-height: 30px;
      padding-left: 20px;
      font-size: 12px;
      color: $color-text-l;
      background: $color-highlight-background;
    }

    .singer-item {
      display: flex;
      align-items: center;
      padding: 20px 20px 0;
      .singer-pic {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
      .singer-name {
        margin-left: 20px;
        color: $color-text-l;
        font-size: $font-size-medium;
      }
    }
  }
  .index-list-section {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    padding: 20px 0;
    border-radius: 10px;
    text-align: center;
    background: $color-background-d;
    font-size: 10px;
    color: $color-text-l;
    z-index: 10;
    .index-item {
      padding: 3px;
      line-height: 1;
      &.current {
        color: $color-theme;
      }
    }
  }
}
</style>
